<template>
  <wd-popup
    :model-value="show"
    custom-style="padding-top: 24rpx;background:#f5f6fa;border-radius: 16rpx 16rpx 0 0"
    safe-area-inset-bottom
    position="bottom"
    transition="slide-up"
    @update:model-value="$emit('update:show', $event)"
  >
    <view
      class="close-button"
      @click="$emit('update:show', false)"
    >
      <wd-icon
        name="close"
        size="36rpx"
        color="#333333"
      />
    </view>
    <view class="product-guarantee-title">
      保障服务
    </view>
    <view class="product-guarantee-block">
      <view
        v-if="component?.guarantee_content?.guarantees?.includes(1)"
        class="guarantee-item"
      >
        <view class="header">
          <v-icon
            size="38rpx"
            src="@/static/icons/product-details-guarantee.svg"
          />
          <view class="title">
            交易保障
          </view>
        </view>
        <view class="content">
          卖家实名，支付交易资金全程监管，买家对交付结果确认满意后解锁资金。
        </view>
      </view>
      <view
        v-if="component?.guarantee_content?.guarantees?.includes(2)"
        class="guarantee-item"
      >
        <view class="header">
          <v-icon
            size="38rpx"
            src="@/static/icons/product-details-guarantee.svg"
          />
          <view class="title">
            消费者保障
          </view>
        </view>
        <view class="content">
          若卖家存在假冒行政许可资质、存在收款后故意不提供服务或商品以及跑路等诈骗行为，致使买家与之发生交易后受到直接经济损失，卖家需要向买家赔付。
        </view>
      </view>
      <view
        v-if="component?.guarantee_content?.guarantees?.includes(3)"
        class="guarantee-item"
      >
        <view class="header">
          <v-icon
            size="38rpx"
            src="@/static/icons/product-details-guarantee.svg"
          />
          <view class="title">
            破损补寄
          </view>
        </view>
        <view class="content">
          如出现商品签收时商品破损，提供破损部分商品补寄服务，补寄费用由卖家承担。
        </view>
      </view>
      <view
        v-if="component?.guarantee_content?.guarantees?.includes(4)"
        class="guarantee-item"
      >
        <view class="header">
          <v-icon
            size="38rpx"
            src="@/static/icons/product-details-guarantee.svg"
          />
          <view class="title">
            七天无理由退换货
          </view>
        </view>
        <view class="content">
          本产品支持七天无理由退货。
        </view>
      </view>
      <view
        v-if="component?.guarantee_content?.guarantees?.includes(5)"
        class="guarantee-item"
      >
        <view class="header">
          <v-icon
            size="38rpx"
            src="@/static/icons/product-details-guarantee.svg"
          />
          <view class="title">
            正品保障
          </view>
        </view>
        <view class="content">
          若商品鉴定为假货，商家支持假一赔三，且承担商品的鉴定费和退回的运费(商家承诺假一赔十，则以假一赔十为准)。
        </view>
      </view>
      <view
        v-if="component?.guarantee_content?.guarantees?.includes(6)"
        class="guarantee-item"
      >
        <view class="header">
          <v-icon
            size="38rpx"
            src="@/static/icons/product-details-guarantee.svg"
          />
          <view class="title">
            假一赔十
          </view>
        </view>
        <view class="content">
          若商品鉴定为假货，商家支持假一赔十。
        </view>
      </view>
    </view>
  </wd-popup>
</template>

<script setup lang="ts">
defineProps<{
  landingPageData: AdLandingPageVO;
  component: LandingPageGoodsItem;
  show: boolean;
}>();

defineEmits<{
  'update:show': [val: boolean];
}>();
</script>

<style lang="scss" scoped>
.close-button {
  position: absolute;
  top: 36rpx;
  right: 36rpx;
  z-index: 1;
}

.product-guarantee-title {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 60rpx;
  margin-bottom: 24rpx;
  text-align: center;
}
.product-guarantee-block {
  margin: 0 24rpx 24rpx;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 36rpx;
  .guarantee-item {
    .header {
      display: flex;
      align-items: center;
      gap: 4rpx;
      margin-bottom: 12rpx;
      .title {
        font-size: 30rpx;
        font-weight: bold;
      }
    }
    .content {
      padding-left: 41rpx;
      font-weight: 300;
    }
  }
}
</style>
